<template>
  <div>
    <div v-for="(item,index) in systemNoticeList" :key="index">
      <div
        style="margin-bottom: 13px;min-height: 65px;background:#efefef;border-radius: 8px;padding: 10px;color: #7e8c8d;margin-right: 5px "
        @click="getSystemNoticeContent(item)"
      >
        <div style="font-size: 14px">
          <span>{{ '[' + formatNoticeType(item) + '] ' + item.title }}</span>
          <span style="float: right">{{ formatDate(item.publicDate) }}</span>
        </div>
        <div style=";font-size: 12px;margin-top: 5px">
          <span>{{ item.summary }}</span>
        </div>
      </div>
    </div>
    <div v-for="(item,index) in userNoticeList" :key="index">
      <div
        style="margin-bottom: 13px;min-height: 65px;background:#efefef;border-radius: 8px;padding: 10px;color: #7e8c8d;margin-right: 5px "
        @click="getUserNoticeContent(item)"
      >
        <div style="font-size: 14px">
          <span>{{ '[' + $t('user') + '] ' + item.title }}</span>
          <span style="float: right">{{ formatDate(item.publicDate) }}</span>
        </div>
        <div style=";font-size: 12px;margin-top: 5px">
          <span>{{ item.summary }}</span>
        </div>
      </div>
    </div>

    <el-dialog
      :title="notice.title"
      :visible.sync="dialogNoticeVisible"
      width="800px"
    >
      <div style="position: relative">
        <span style="height: 300px" v-html="notice.msg"/>
        <div style="margin-top: 20px;display: flex;justify-content: flex-end">
          <el-button
            style="margin-right: 10px"
            type="text"
            @click="showQrCode(notice.url)"
          >{{ $t('qrCode') }}
          </el-button>
          <el-link
            v-if="notice.url"
            style="margin-right: 10px"
            :href="notice.url"
            type="primary"
            target="_blank"
          >{{ $t('url') }}
          </el-link>
          <div style="line-height: 28px">
            {{ $t('publicDate') }}:{{ formatDate(notice.publicDate) }}
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="$t('qrCode')"
      :visible.sync="dialogQrCodeVisible"
      destroy-on-close
      width="300px"
    >
      <div ref="qrCodeDiv" style="width:300px;margin: 0 auto"/>
    </el-dialog>

  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import { pageGetSystemNotice } from '@/api/common/commonSystemNoticeApi'
import { pageGetUserNotice } from '@/api/common/commonUserNoticeApi'
import { formatDate, formatNoticeType } from '@/util/common'
import { getCompanyId, getLanguage, getUserId } from '@/util/storage'
import { getSystemNoticeContent } from '@/api/common/commonSystemNoticeContentApi'
import { getUserNoticeContent } from '@/api/common/commonUserNoticeContentApi'

export default {
  name: 'UserNotice',
  data() {
    return {
      systemNoticeList: [],
      userNoticeList: [],
      notice: {},
      dialogNoticeVisible: false,
      dialogQrCodeVisible: false,
      userId: getUserId(),
      language: getLanguage(),
      companyId: getCompanyId()
    }
  },
  created() {
    this.pageGetSystemNotice()
    this.pageGetUserNotice()
  }, methods: {
    showQrCode(url) {
      this.dialogQrCodeVisible = true
      this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeDiv, {
          text: url,
          width: 250,
          height: 250,
          colorDark: '#333333', // 二维码颜色
          colorLight: '#ffffff', // 二维码背景色
          correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
        })
      })
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    getSystemNoticeContent(item) {
      getSystemNoticeContent({
        noticeId: item.noticeId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          item.msg = data.msg
          this.notice = item
          this.dialogNoticeVisible = true
        }
      })
    },
    getUserNoticeContent(item) {
      getUserNoticeContent({
        noticeId: item.noticeId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          item.msg = data.msg
          this.notice = item
          this.dialogNoticeVisible = true
        }
      })
    },
    formatNoticeType(row) {
      return formatNoticeType(this, row.type, row.solve)
    },
    pageGetSystemNotice() {
      const that = this
      pageGetSystemNotice({
        pageSize: 5,
        currentPage: 1,
        language: this.language,
        companyId: this.companyId,
        onlyCompany: false
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const systemNoticeList = data.data
          this.systemNoticeList = systemNoticeList
          for (let i = 0; i < systemNoticeList.length; i++) {
            if (
              systemNoticeList[i].outTime != null &&
              (new Date().getTime() < systemNoticeList[i].outTime * 1000 &&
                new Date().getTime() >= systemNoticeList[i].publicDate * 1000)
            ) {
              setTimeout(function() {
                const h = that.$createElement
                that.$notify({
                  title: systemNoticeList[i].title,
                  message: h(
                    'i',
                    {
                      style: 'color: teal'
                    },
                    systemNoticeList[i].msg
                  ),
                  type: 'warning'
                })
              }, i * 1000)
            }
          }
        }
      })
    },
    pageGetUserNotice() {
      pageGetUserNotice({
        pageSize: 5,
        currentPage: 1,
        userId: this.userId,
        language: this.language
        // readed: false
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const userNoticeList = data.data
          userNoticeList.forEach(userNotice => {
            userNotice.publicDate = userNotice.createdDate
          })
          this.userNoticeList = userNoticeList
        }
      })
    }
  }
}
</script>

